 <template>
  <view>
    <uni-popup ref="popupBinding" type="center">
      <view class="cancel-order">
        <view class="inform-title">绑定手机号</view>
        <view class="iconfont" @click="cancelClick">&#xe711;</view>
        <input 
          class="phone-input" 
          v-model="fromData.PhoneNumber" 
          type="digit" 
          :maxlength="11"
          placeholder-style="font-size: 28rpx;color: #8C8C8C; font-weight: normal;"
          placeholder="请输入手机号"
        />
        <view class="input-btn">
          <input 
            class="code-input"
             v-model="fromData.SmsCode" 
             type="digit" 
             :maxlength="6"
              placeholder-style="font-size: 28rpx;color: #8C8C8C; font-weight: normal;"
             placeholder="请输入验证码"
           />
          <view class="get-code" v-if="showbtn" @click="getCode">{{ codeName }}</view>
          <view class="get-code" v-else>{{ codeName }}</view>
        </view>
       <view class="footer-btn">
        <view  class="btn-primary" @click="affirmBtn">确认</view>
       </view>
      </view>
    </uni-popup>
  </view>
</template> 

<script>
  import { noteVerify, bindPhone } from '@/utils/api.js' // 接口api
  export default {
  	data() {
  		return {
        timer: null,
        codeName: '获取验证码',
        secTime: 60, // 倒计时秒数
        showbtn: true, // 展示获取验证码或倒计时按钮判断
        regPhone: /^[1][3,4,5,6,7,8,9][0-9]{9}$/, // 手机正则
        fromData: { // 绑定手机参数
          PhoneNumber:'', // 手机号
          SmsCodeToken:'', // 短信返回的token
          SmsCode:'' // 输入的验证码
        },
      }
    },
    methods:{
      // 获取验证码
      async getCode() {
        if (!this.fromData.PhoneNumber){
          uni.showToast({  title:'请输入手机号码！',icon:'none' })
          return false
        }
        this.getyzcode()
        const res = await noteVerify({
          phoneNumber: this.fromData.PhoneNumber,
          templateCode: 'SMS_226810366'
        })
        if(res.code === 0) {
          this.fromData.SmsCodeToken = res.result
        }
      },
      // 60秒倒计时
      getyzcode () {
        clearInterval(this.timer)
        this.timer = setInterval(() => {
          this.secTime = this.secTime - 1
          this.codeName = this.secTime + 'S后重试'
          this.showbtn = false
          if (this.secTime === 0) {
              clearInterval(this.timer)
              this.secTime = 60
              this.codeName = "获取验证码"
              this.showbtn = true
          }
        }, 1000)
      },
      // 返回事件取消
      concalBtn() {
        this.$emit("concalBtn")
      },
      // 返回确认事件
      async affirmBtn() {
        const vm = this
        if (!vm.fromData.PhoneNumber){
          uni.showToast({  title:'请输入手机号码！',icon:'none' })
          return false
        }
        if(vm.fromData.PhoneNumber && !vm.regPhone.test(vm.fromData.PhoneNumber)) {
          uni.showToast({  title:'手机号码格式不正确',icon:'none' })
          return false
        }
        if(!vm.fromData.SmsCode) {
          uni.showToast({  title:'请输入验证码',icon:'none' })
          return false
        }
        const phoneData = await bindPhone(this.fromData)
        const phoneNum = JSON.parse(JSON.stringify(phoneData,vm.fromData.PhoneNumber))
        this.$emit("affirmBtn",phoneData,phoneNum)
        vm.fromData.PhoneNumber = '' // 清空电话
        vm.fromData.SmsCode = '' // 清空验证码
        this.$refs.popupBinding.close()
      },
      getPopupOpen() {
        this.$refs.popupBinding.open()
      },
      getPopupConcal() {
        this.$refs.popupBinding.close()
      },
      cancelClick() {
        this.$refs.popupBinding.close()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .cancel-order{
    width: 560rpx;
    // height: 500rpx;
    background: #ffffff;
    border-radius: 40rpx;
    padding: 32rpx 48rpx 48rpx 48rpx;
    text-align: center;
    .inform-title{
      font-size: 32rpx;
      color: #FF800C;
    }
    .iconfont{
      font-size: 45rpx;
      color: #FF800C;
      position: absolute;
      top: 20rpx;
      right: 25rpx;
    }
      .phone-input{
        width: 464rpx;
        height: 72rpx;
        line-height: 72rpx;
        background: #FFFAE8;
        border: 2rpx solid #FFDAB9;
        border-radius: 36rpx;
        margin: 18rpx 0 48rpx 0;
        padding-left: 32rpx;
        box-sizing: border-box;
        text-align: left;
        color: #FF800C;
        font-weight: bold;
        font-size: 32rpx;
      }
      .input-btn{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .code-input{
          width: 256rpx;
          height: 72rpx;
          line-height: 72rpx;
          background: #FFFAE8;
          border: 2rpx solid #FFDAB9;
          border-radius: 36rpx;
          padding-left: 32rpx;
          text-align: left;
          box-sizing: border-box;
          color: #FF800C;
          font-weight: bold;
          font-size: 32rpx;
        }
        .get-code{
          width: 192rpx;
          height: 72rpx;
          border: 2rpx solid #FF800C;
          border-radius: 36rpx;
          text-align: center;
          line-height: 72rpx;
          color: #FF800C;
          font-size: 28rpx;
        }
      }
    .footer-btn{
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 64rpx;
      .btn-primary{
         width: 464rpx;
         height: 72rpx;
         border-radius: 36rpx;
         line-height: 72rpx;
         background: #FF800C;
         color: #FFFFFF;
         font-weight: bold;
         font-size: 32rpx;
         letter-spacing: 0.2em;
      }
    }
  }
</style>

